import React from 'react'
import { LineChart, Grid } from 'react-native-svg-charts'
import * as shape from 'd3-shape'
import { Circle, G, Line, Rect, Text } from 'react-native-svg'

class ExtrasExample extends React.PureComponent {

  render() {

    const data = [50, 10, 40, 95, -4, -24, 85, 91, 35, 53, -53, 24, 50, -20, -80]

    /**
     * Both below functions should preferably be their own React Components
     */

    const HorizontalLine = (({ y, width }) => (
      <Line
        key={'zero-axis'}
        x1={'0%'}
        x2={width}
        y1={y(50)}
        y2={y(50)}
        stroke={'grey'}
        strokeDasharray={[4, 8]}
        strokeWidth={2}
      />
    ))

    const Tooltip = ({ x, y }) => (
      <G
        x={x(5) - (75 / 2)}
        key={'tooltip'}
        onPress={() => console.log('tooltip clicked')}
      >
        <G y={50}>
          <Rect
            height={40}
            width={75}
            stroke={'grey'}
            fill={'white'}
            ry={10}
            rx={10}
          />
          <Text
            x={75 / 3.5}
            dy={15}
            alignmentBaseline={'middle'}
            stroke={'rgb(134, 65, 244)'}
          >
            {`${data[5]}ºC`}
          </Text>
        </G>
        <G x={75 / 2}>
          <Line
            y1={50 + 40}
            y2={y(data[5])}
            stroke={'grey'}
            strokeWidth={2}
          />
          <Circle
            cy={y(data[5])}
            r={6}
            stroke={'rgb(134, 65, 244)'}
            strokeWidth={2}
            fill={'white'}
          />
        </G>
      </G>
    )

    return (
      <LineChart
        style={{ height: 200 }}
        data={data}
        svg={{
          stroke: 'rgb(134, 65, 244)',
          strokeWidth: 2,
          fillOpacity: 0
        }}
        contentInset={{ top: 20, bottom: 20 }}
        curve={shape.curveLinear}
      >
        <Grid />
        <HorizontalLine />
        <Tooltip />
      </LineChart>
    )
  }

}

export default ExtrasExample